<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .btn-group, .btn-group-vertical {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .btn .caret {
        margin-left: 0;
    }
    .caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-top: 4px solid \9;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }

    .well {
        min-height: 420px !important;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 3px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }
    #database .dropdown-menu ul li{
        margin: 3px 0;
    }
    #database #tablename{
        height: 205px;
        width: 100%;
        padding: 5px;
    }
    #database #tablename option{
        height: 18px;
        font-size: 12px;
    }


</style>
<div class="layui-fluid" id="database">
    <blockquote class="layui-elem-quote">
        <p style="color: #0a001f;font-size: 16px;">数据库管理</p>
        <span style="font-size: 12px;">可在线进行一些简单的数据库表优化或修复，查看表结构和数据，也可以进行SQL语句的操作</span>
    </blockquote>
    <div class="row layui-form-item">
        <div class="col-xs-4">
            <p>查询结果:</p>
        </div>
        <div class="col-xs-8" style="text-align: right;">
            <form action="{:url('database/query')}" method="post" name="infoform" target="resultframe">
                <input type="hidden" name="do_action" id="topaction" />
<!--                <button type="button"  class="layui-btn layui-btn-sm btn-compress"><i class="layui-icon layui-icon-util"></i>备份与还原</button>-->
                <div class="btn-group">
                    <button data-toggle="dropdown" class="layui-btn layui-btn-sm dropdown-toggle" type="button">基础查询 <span class="caret"></span></button>
                    <div class="row dropdown-menu pull-right" style="width:300px;">
                        <div class="col-xs-6">
                            <select class="form-control select-striped" id="tablename" name="tablename[]" multiple="multiple">
                                {foreach $tables as $table}
                                <option value="{$table.name}" title="">{$table.name}</option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="col-xs-6">
                            <ul id="subaction" class="list-unstyled">
                                <li><input type="submit" name="submit1" value="查看表结构" rel="viewinfo" class="btn btn-primary btn-embossed btn-sm btn-block"/></li>
                                <li><input type="submit" name="submit2" value="查看表数据" rel="viewdata" class="btn btn-primary btn-embossed btn-sm btn-block"/></li>
                                <li><input type="submit" name="submit3" value="优化表" rel="optimize" class="btn btn-primary btn-embossed btn-sm btn-block" /></li>
                                <li><input type="submit" name="submit4" value="修复表" rel="repair" class="btn btn-primary btn-embossed btn-sm btn-block"/></li>
                                <li><input type="submit" name="submit5" value="优化全部表" rel="optimizeall" class="btn btn-primary btn-embossed btn-sm btn-block" /></li>
                                <li><input type="submit" name="submit6" value="修复全部表" rel="repairall" class="btn btn-primary btn-embossed btn-sm btn-block" /></li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <div class="well" id="resultparent" style="height: 300px;">
        <iframe name="resultframe" frameborder="0" id="resultframe" style="height:100%;" width="100%" height="100%"></iframe>
    </div>
    <form action="{:url('database/query')}" method="post" id="sqlexecute" name="form1" target="resultframe">
        <input type="hidden" name="do_action" value="doquery" />
        <div class="layui-form-item">
            <textarea name="sqlquery" placeholder="请输入SQL语句，支持批量查询，多条SQL以分号(;)分割" cols="60" rows="5" class="layui-textarea" id="sqlquery"></textarea>
        </div>
        <div class="layui-form-item">
            <input type="submit" class="layui-btn" value="执行" />
            <input type="reset" class="layui-btn" value="重置" />
        </div>

    </form>
</div>
<script id="backuptpl" type="text/html">
    <p>
        <a href="javascript:;" class="btn btn-success btn-backup"><i class="fa fa-compress"></i>立即备份</a>
        <span class="text-danger">如果你的数据过大，不建议采用此方式进行备份，会导致内存溢出的错误。</span>
    </p>

    <table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%" style="min-width:500px;font-size:12px;">
        <thead>
        <tr>
            <th>ID</th>
            <th>文件</th>
            <th>大小</th>
            <th>备份日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {{each backuplist as value index}}
            <td>{{index+1}}</td>
            <td>{{value.file}}</td>
            <td>{{value.size}}</td>
            <td>{{value.date}}</td>
            <td>
                <a href="javascript:;" class="btn btn-primary btn-restore btn-xs" data-file="{{value.file}}"><i class="fa fa-reply"></i> 还原</a>
                <a href="javascript:;" class="btn btn-danger btn-delete btn-xs" data-file="{{value.file}}"><i class="fa fa-times"></i>删除</a>
            </td>
        {{/each}}
        </tbody>
    </table>
</script>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form'], function () {
        var $ = layui.$  , form = layui.form;
        form.render();
        //事件按钮操作
        $("#database").on("click", "ul#subaction li input", function () {
            $("#topaction").val($(this).attr("rel"));
            return true;
        });

        //窗口变更的时候重设结果栏高度
        $(window).on("resize", function () {
            $("#database .well").height($(window).height() - $("#database #sqlexecute").height() - $("#ribbon").outerHeight() - $(".panel-heading").outerHeight() - 130);
        });

        //修复iOS下iframe无法滚动的BUG
        if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
            $("#resultparent").css({"-webkit-overflow-scrolling": "touch", "overflow": "auto"});
        }

        $(document).on("click", ".btn-compress", function () {
           $.ajax({
               url:"{:url('database/backuplist')}",
               type:"get",
                success:function (data) {
                    layer.open({
                        area: ["680px", "500px"],
                        btn: [],
                        title: "备份与还原",
                        content: template("backuptpl", {backuplist: data.backuplist})
                    });
                }
           });
            return false;
        })

        $(document).on("click", ".btn-backup", function () {
            $.ajax({
                url:"{:url('database/backup')}",
                data: {action: 'backup'}
            }, function (data) {
                layer.closeAll();
                $(".btn-compress").trigger("click");
            });
        });
    });
</script>